<template>
  <view class="page">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="handleBack">
      <uni-icons type="back" size="24" color="#333" />
    </view>

    <!-- 标题 -->
    <view class="page-title">
      选择科室
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <view class="tab-item active">
        <text>预约挂号</text>
      </view>
    </view>

    <!-- 科室列表 -->
    <view class="department-container">
      <!-- 左侧主科室 -->
      <scroll-view class="left-menu" scroll-y>
        <view
          v-for="(item, index) in mainDepts"
          :key="item.id"
          :class="['menu-item', currentDept === index ? 'menu-active' : '']"
          @click="switchDept(index, item.id)"
        >
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧专科列表 -->
      <scroll-view class="right-content" scroll-y>
        <view
          v-for="(item, index) in currentSubDepts"
          :key="item.id"
          class="sub-dept"
          @click="handleSubDeptClick(item)"
        >
          <text class="sub-dept-name">{{ item.name }}</text>
          <uni-icons type="right" size="16" color="#999" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { apiBaseUrl } from '../../../config/api'

declare const uni: any;

interface Dept {
  id: number;
  name: string;
}

// 页面状态
const currentDept = ref(-1)
const mainDepts = ref<Dept[]>([])
const currentSubDepts = ref<Dept[]>([])

// 获取科室列表
const getDeptList = async () => {
  try {
    console.log('开始请求科室列表');
    const res = await uni.request({
      url: apiBaseUrl + '/medical/dept/selectMedicalDeptList',
      method: 'POST',
      data: {
        outpatient: true
      }
    });
    
    console.log('科室列表响应：', res);
    
    if (res.statusCode === 200) {
      if (res.data.code === 200) {
        console.log('科室列表数据：', res.data.result);
        mainDepts.value = res.data.result;
      } else {
        console.error('业务错误：', res.data);
        throw new Error(res.data.msg || '请求失败');
      }
    } else {
      console.error('请求错误：', res);
      throw new Error('请求失败');
    }
  } catch (error) {
    console.error('获取科室列表失败：', error);
    uni.showToast({
      title: '获取科室列表失败',
      icon: 'none'
    })
  }
}

// 获取诊室列表
const getSubDeptList = async (deptId: number) => {
  try {
    console.log('开始请求诊室列表');
    const res = await uni.request({
      url: apiBaseUrl + '/medical/dept/sub/selectMedicalDeptSubList',
      method: 'POST',
      data: {
        deptId
      }
    });

    console.log('诊室列表响应：', res);

    if (res.statusCode === 200) {
      if (res.data.code === 200) {
        console.log('诊室列表数据：', res.data.result);
        currentSubDepts.value = res.data.result;
      } else {
        console.error('业务错误：', res.data);
        throw new Error(res.data.msg || '请求失败');
      }
    } else {
      console.error('请求错误：', res);
      throw new Error('请求失败');
    }
  } catch (error) {
    console.error('获取诊室列表失败：', error);
    uni.showToast({
      title: '获取诊室列表失败',
      icon: 'none'
    })
  }
}

// 科室切换方法
const switchDept = (index: number, deptId: number) => {
  currentDept.value = index
  getSubDeptList(deptId)
}

// 选择专科处理
const handleSubDeptClick = (subDept: Dept) => {
  console.log('跳转参数：', {
    deptId: subDept.id,
    deptName: subDept.name,
    encodedName: encodeURIComponent(subDept.name)
  })
  uni.navigateTo({
    url: `/pages/index/Make-appointment/select-date?deptSubId=${subDept.id}&deptSubName=${encodeURIComponent(subDept.name)}`
  })
}

// 返回首页
const handleBack = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

// 页面加载时获取科室列表
onMounted(() => {
  getDeptList()
})
</script>

<style>
/* 页面基础样式 */
page {
  background-color: #f5f8ff;
}

.page {
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: calc(44px + env(safe-area-inset-top));
}

/* 返回按钮样式 */
.back-btn {
  position: fixed;
  top: calc(44px + env(safe-area-inset-top));
  left: 30rpx;
  z-index: 100;
  width: 44rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
}

/* 页面标题 */
.page-title {
  position: fixed;
  top: calc(44px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 34rpx;
  font-weight: 500;
  color: #333;
  background: #fff;
  z-index: 99;
}

/* 标签栏样式 */
.tab-bar {
  position: fixed;
  top: calc(44px + 88rpx + env(safe-area-inset-top));
  left: 0;
  right: 0;
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  z-index: 98;
  padding-left: 30rpx;
}

.tab-item {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 32rpx;
  font-weight: 500;
}

.tab-item.active {
  color: #2979ff;
  position: relative;
  width: fit-content;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rpx;
  background: #2979ff;
  border-radius: 2rpx;
}

/* 科室列表容器 */
.department-container {
  position: fixed;
  top: calc(44px + 176rpx + env(safe-area-inset-top));
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
}

.left-menu {
  width: 200rpx;
  height: 100%;
  background: #f8f8f8;
}

.menu-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.menu-item.menu-active {
  background: #fff;
  color: #2979ff;
  font-weight: 500;
}

.menu-item.menu-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background: #2979ff;
  border-radius: 0 4rpx 4rpx 0;
}

.right-content {
  flex: 1;
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}

.sub-dept {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #eee;
}

.sub-dept-name {
  font-size: 28rpx;
  color: #333;
}
</style>
